<template>
  <div class="performanceAssess-box content-box">
    <nav-title title="绩效评估" :routerLink="routerLink"/>
    <div class="regulations-box">
      <div class="title">基本信息</div>
      <div class="information">
        <div class="info-cell clearfix">
          <label class="label">员工ID</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.emplid}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.name}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.dept}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.jodDescr}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">考核模板</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.tempName}}</span>
        </div>
      </div>
    </div>
    <div class="regulations-box">
      <div class="title">绩效评估</div>
      <div v-for="item in allInfo.perfors" class="performanceAssess-content">
        <div class="my-title">
          <p>
            {{item.sectionDesc}}
            <span class="img" v-if="edit"><img @click="toAddOrModify('add', '', item)" v-if="item.sectionType == 'B'" src="./images/u1405.png" width="20" alt=""/></span>
            <span>{{item.sectionWeight}}</span>
          </p>
        </div>
        <ul>
          <li v-for="value in item.items" @click="()=>{
            if (item.sectionType == 'B') {
              toAddOrModify('modify', item.sectionDesc, value)
            } else {
              goDetail(value, item.sectionDesc,item.sectionType);
            }
            }">
            <div>
              <p style="lineHeight: 20px; minHeight: 20px;">{{value.itemDesc}} <span>{{value.itemWeight}}</span></p>
              <p style="lineHeight: 20px; minHeight: 20px;">{{value.itemOther}}</p>
              <p style="color:#f00; lineHeight: 20px; minHeight: 20px;" v-if="value.comment || value.score">{{value.comment}} <span>{{value.score}}</span></p>
              <div v-if="value.comment || value.score" class="arrow"></div>
              <div v-else=""></div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 流程图 -->
    <div class="regulations-box">
      <div class="title">绩效评估人</div>
      <v-flow-charts :type="'performanceAssess'" :docid="docid" :version="version" :epPhase="epPhase"></v-flow-charts>
    </div>

    <div class="regulations-box">
      <div class="info-label">评估结果及意见</div>
      <div class="information">
        <div class="info-cell clearfix">
          <label class="label">评估结果</label>
          <div class="value"><input type="text" style="width:100%; color:#f00; textAlign:right; paddingRight:20px;" placeholder="请点击计算按钮" v-model="score" disabled/></div>
        </div>
        <div class="info-cell clearfix">
          <label class="label">调整评估结果</label>
          <div class="value arrow" v-if="allInfo.evaType == 'B'">
            <group>
              <popup-radio placeholder="请选择" :readonly="!edit" :options="allInfo.selects" v-model="revisedScore" />
            </group>
          </div>
          <div v-else class="value" >
            <input type="text" placeholder="请填写" :disabled="!edit" style="width:100%; textAlign:right; paddingRight:20px;" v-model="revisedScore"/>
          </div>
        </div>
      </div>
      <div style="padding:10px;">
        <x-textarea v-model="comments" :disabled="!edit" :max="200" placeholder="请在这里输入评估意见..."/>
      </div>
    </div>

    <div class="btn-box" v-if="edit">
      <button @click="saveOrSubmit('save')">保存</button>
      <button @click="Calc"><img src="./images/u1269.png" alt=""/>计算</button>
      <button @click="saveOrSubmit('submit')">提交</button>
    </div>
  </div>
</template>

<script>
import { XTextarea, Group, PopupRadio } from "vux";
import {
  getPerformancePlan,
  perassessApproveSavepoint,
  perassessApproveCalcpoint
} from "../../api/api";
import vFlowCharts from "../formalStaff/common/flowChart";
import qs from "qs";

export default {
  name: "PerformanceAssess",
  components: {
    XTextarea,
    vFlowCharts,
    Group,
    PopupRadio
  },
  created() {
    this.docid = this.$route.query.docid;
    this.version = this.$route.query.version;
    this.cTransactionNbr = this.$route.query.cTransactionNbr;
    this.epPhase = this.$route.query.epPhase;
    this.seqnbr = this.$route.query.seqnbr;
    this.wfType = "EPEV";
    this.getPerformancePlanFunc();
    if (this.$route.query.flag == "B030") this.edit = false;
  },
  mounted() {},
  data() {
    return {
      edit: true,
      wfType: "",
      routerLink: "",
      docid: "",
      version: "",
      cTransactionNbr: "",
      epPhase: "",
      allInfo: {},
      comments: "",
      score: "",
      revisedScore: ""
    };
  },
  methods: {
    // getData() {
    //   console.debug(this.year);
    // },
    getPerformancePlanFunc() {
      this.$vux.loading.show();
      let params = {
        cTransactionNbr: this.cTransactionNbr,
        docid: this.docid,
        version: this.version,
        seqnbr: this.seqnbr,
        epPhase: this.epPhase,
        wfType: this.wfType
      };
      getPerformancePlan(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allInfo = res.retData;
            this.score = res.retData.score;
            this.revisedScore = res.retData.revisedScore;
            this.comments = res.retData.comments;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    saveOrSubmit(action) {
      let title = "";
      if (action == "save") {
        title = "保存";
      } else {
        title = "提交";
      }
      this.$vux.confirm.show({
        title: "提示",
        content: `您确认要${title}？`,
        onConfirm: () => {
          this.$vux.loading.show();
          const params = {
            cTransactionNbr: this.cTransactionNbr,
            docid: this.docid,
            version: this.version,
            comments: this.comments,
            seqnbr: this.seqnbr,
            epPhase: this.epPhase,
            score: this.score,
            revisedScore: this.revisedScore
          };
          if (action == "submit") {
            params.type = "submit";
          }
          perassessApproveSavepoint(qs.stringify(params))
            .then(res => {
              this.$vux.loading.hide();
              if (res && res.retCode === "000000") {
                // this.$vux.alert.show({
                //   title: "成功",
                //   content: `${title}成功！`,
                //   onHide: () => {
                this.$router.go(-1);
                //   }
                // });
              } else {
                this.$vux.alert.show({
                  title: "提示",
                  content: res.retMsg
                });
              }
            })
            .catch(res => {
              this.$vux.loading.hide();
              this.$vux.alert.show({
                title: "警告",
                content: "网络异常，请稍后重试"
              });
            });
        }
      });
    },
    goDetail(value, title, sectionType) {
      this.$router.push({
        name: "PerformanceAssessDetail",
        query: {
          cTransactionNbr: this.cTransactionNbr,
          docid: this.docid,
          version: this.version,
          sectionId: value.sectionId,
          catType: value.catType,
          itemId: value.itemId,
          seqnbr: this.seqnbr,
          epPhase: this.epPhase,
          sectionType: sectionType,
          title,
          edit: this.edit
        }
      });
    },
    toAddOrModify(type, title, value) {
      this.$router.push({
        name: "PerformanceAssessAddOrModify",
        query: {
          cTransactionNbr: this.cTransactionNbr,
          docid: this.docid,
          version: this.version,
          type,
          title,
          sectionId: value.sectionId,
          catType: value.catType,
          itemId: value.itemId,
          seqnbr: this.seqnbr,
          epPhase: this.epPhase,
          edit: this.edit
        }
      });
    },
    Calc() {
      this.$vux.loading.show("计算中");
      const params = {
        docid: this.docid,
        version: this.version,
        evaType: this.allInfo.evaType
      };
      perassessApproveCalcpoint(qs.stringify(params))
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.score = res.retData;
            this.$vux.alert.show({
              title: "成功",
              content: `计算成功！`
            });
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    }
  }
};
</script>

<style type="text/scss" lang="scss">
@import "../../styles/staff.scss";
.performanceAssess-box {
  .arrow.value {
    .weui-cells,
    .weui-cell {
      width: 100%;
      height: 32px;
    }
    .weui-cell__ft {
      position: relative;
      width: 100%;
      text-align: right;
      display: block;
      padding-right: 50px;
      &::after {
        content: none;
      }
      &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 8px;
        background: url("../vacation/images/u183.png") 0 0 no-repeat;
        top: 8px;
        right: 20px;
        background-size: 20px 8px;
      }
    }
  }
  .vux-x-textarea {
    border: 1px solid #ccc;
  }
  .performanceAssess-content {
    .my-title {
      padding: 0 20px 0 26px;
      text-align: left;
      position: relative;
      &::before {
        content: " ";
        position: absolute;
        left: 12px;
        top: 7px;
        width: 6px;
        height: 20px;
        background-color: #1caafe;
      }
      p {
        border-bottom: 1px solid #eee;
        line-height: 2.6;
        .img {
          float: right;
          margin: 8px 10px 0;
        }
        span {
          float: right;
        }
      }
    }
    ul {
      li {
        padding: 0 20px;
        > div {
          border-bottom: 1px solid #ccc;
          padding: 10px 0;
          position: relative;
          color: #444;
          text-align: left;
          padding-right: 50px;
          color: #555;
          p span {
            float: right;
          }
          > div,
          > .arrow {
            position: absolute;
            top: 0;
            right: 0;
            line-height: 60px;
            &::after,
            &::before {
              content: " ";
              position: absolute;
              right: -5px;
              width: 20px;
              height: 2px;
              background-color: #ccc;
              border-radius: 5px;
            }
            &::after {
              top: 23px;
              transform: rotate(45deg);
            }
            &::before {
              top: 36px;
              transform: rotate(-45deg);
            }
          }
          > .arrow {
            &::after {
              top: 32px;
            }
            &::before {
              top: 46px;
            }
          }
        }
      }
      li:last-child > div {
        border: none;
      }
    }
  }
  .btn-box {
    padding: 20px;
    margin-bottom: 20px;
    button {
      padding: 10px 30px;
      font-size: 16px;
      border-radius: 5px;
      color: #fff;
      font-weight: bold;
      // margin: 0 20px;
      &:first-child {
        background-color: rgba(28, 170, 254, 1);
      }
      &:last-child {
        background-color: rgba(255, 152, 0, 1);
      }
      &:nth-child(2) {
        background-color: transparent;
        color: #000;
        padding: 10px;
        img {
          margin-right: 5px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
